<template>
    <div id="echartMap"></div>
</template>

<script>
export default {
    name: 'Map',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    },
    mounted() {
        import(/* webpackChunkName: "my-chunk-name" */ /* webpackMode: "lazy" */ 'echarts').then(
            echarts => {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('echartMap'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    tooltip: {},
                    xAxis: {
                        data: [
                            '衬衫',
                            '羊毛衫',
                            '雪纺衫',
                            '裤子',
                            '高跟鞋',
                            '袜子'
                        ]
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            data: [5, 20, 36, 10, 10, 20]
                        }
                    ]
                })
            }
        )
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
#echartMap {
    width: 600px;
    height: 400px;
}
</style>
